<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Proxy 与 Reflect</title>
</head>
<body>
  <script>
    /* 
    Proxy: 拦截/监视要对目标数据进行操作
    Reflect: 真正操作目标数据

    操作: 读取 / 设置 / 添加 / 删除 属性
    */
    const user = {
      name: 'tom',
      age: 12
    }

    // 创建代理对象
    const userProxy = new Proxy(user, {  // 配置对象 => handler
      // 拦截读取属性
      get (target, property) {
        console.log('get()', property)
        
        return Reflect.get(target, property)
      },

      // 拦截设置或添加属性
      set (target, property, value) {
        console.log('set()', property, value)
        Reflect.set (target, property, value)
        // 后面就可以去更新界面
      },

      // 拦截删除属性
      deleteProperty(target, property) {
        console.log('deleteProperty()', property)
        Reflect.deleteProperty(target, property)
        // 后面就可以去更新界面
      }

    })

    // 通过代理对象读取属性
    // console.log(userProxy.name)
    // console.log(userProxy.age)

    // 通过代理对象设置属性
    // userProxy.name = 'CC'
    // 通过代理对象添加属性
    // userProxy.sex = '男'

    // 通过代理对象删除属性
    delete userProxy.name

    console.log(user)

  </script>
</body>
</html>